<template>
<div>
  <nav-header></nav-header>
  <nav-bread>cart</nav-bread>
  <div class="container">
    <div class="cart">
      <div class="page-title-normal">
        <h2 class="page-title-h2"><span>My Cart</span></h2>
      </div>
      <div class="item-list-wrap">
        <div class="cart-item">
          <div class="cart-item-head">
            <ul>
              <li>Items</li>
              <li>Price</li>
              <li>Quantity</li>
              <li>Subtotal</li>
              <li>Edit</li>
            </ul>
          </div>
          <ul class="cart-item-list">
            <li v-for="(item,index) in cartList" :key="index">
              <div class="cart-tab-1">
                <div class="cart-item-check">
                  <a href="javascipt:;" class="checkbox-btn item-check-btn" :class="{'check':item.checked === '1'}" @click="editCart('checked',item)">
                    <svg class="icon icon-ok">
                      <use xlink:href="#icon-ok"></use>
                    </svg>
                  </a>
                </div>
                <div class="cart-item-pic">
                  <img :src="'/static/'+item.productImage">
                </div>
                <div class="cart-item-title">
                  <div class="item-name">{{item.productName}}</div>
                </div>
              </div>
              <div class="cart-tab-2">
                <div class="item-price">{{item.salePrice | currency('$')}}</div>
              </div>
              <div class="cart-tab-3">
                <div class="item-quantity">
                  <div class="select-self select-self-open">
                    <div class="select-self-area">
                      <a class="input-sub" @click="editCart('minus',item)">-</a>
                        <span class="select-ipt">
                          <input type="text" value="" v-model="item.productNum">
                        </span>
                      <a class="input-add" @click="editCart('add',item)">+</a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="cart-tab-4">
                <div class="item-price-total">{{(item.salePrice*item.productNum) | currency('$')}}</div>
              </div>
              <div class="cart-tab-5">
                <div class="cart-item-opration">
                  <span class="item-edit-btn" @click="delComfirmMd(item.productId)">
                    <svg class="icon icon-del">
                      <use xlink:href="#icon-del"></use>
                    </svg>
                  </span>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="cart-foot-wrap">
        <div class="cart-foot-inner">
          <div class="cart-foot-l">
            <div class="item-all-check">
              <a href="javascipt:;">
                    <span @click="toggleCheckAll" :class="{'check':checkAllFlag}" class="checkbox-btn item-check-btn">
                        <svg class="icon icon-ok"><use xlink:href="#icon-ok"/></svg>
                    </span>
                <span>Select all</span>
              </a>
            </div>
          </div>
          <modal v-bind:mdShow="delMdShow" v-on:close="closeModal">
            <p slot="message">确定要删除这件商品吗？</p>
            <div slot="btnGroup">
              <span @click="delCart" class="btn btn--m">确认</span>
              <span @click="closeModal" class="btn btn--m">关闭</span>
            </div>
          </modal>
          <div class="cart-foot-r">
            <div class="item-total">
              Item total: <span class="total-price">{{totalPrice | currency('$')}}</span>
            </div>
            <div class="btn-wrap">
              <span class="btn btn--red">Checkout</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <nav-footer></nav-footer>
</div>
</template>
<script>
import './../assets/css/checkout.css'
import NavHeader from '@/components/Header.vue'
import NavFooter from '@/components/Footer.vue'
import NavBread from '@/components/NavBread.vue'
import Modal from '@/components/Modal.vue'
import axios from 'axios'
export default {
  data () {
    return {
      cartList: [],
      productId: '',
      delMdShow: false
    }
  },
  mounted () {
    this.getCartList()
  },
  computed: {
    checkAllFlag () {
      return this.checkCount === this.cartList.length
    },
    checkCount () {
      var i = 0
      this.cartList.forEach((item) => {
        if (item.checked === '1') i++
      })
      return i
    },
    totalPrice () {
      var money = 0
      var moneyTxt = '0元'
      this.cartList.forEach((item) => {
        if (item.checked === '1') {
          money += parseFloat(item.salePrice) * parseInt(item.productNum)
        }
      })
      moneyTxt = money + '元'
      return moneyTxt
    }
  },
  methods: {
    getCartList () {
      axios.get('/users/cartList').then((response) => {
        let res = response.data
        this.cartList = res.result
        console.log(res)
      })
    },
    // 确认删除的弹窗出现
    delComfirmMd (productId) {
      this.productId = productId
      this.delMdShow = true
    },
    // 关闭弹窗
    closeModal () {
      this.delMdShow = false
    },
    // 删除商品
    delCart () {
      axios.post('/users/delCart', {productId: this.productId}).then((response) => {
        let res = response.data
        if (res.status === '0') {
          this.delMdShow = false
          this.getCartList()
        }
      })
    },
    // 修改购物车
    editCart (flag, item) {
      if (flag === 'add') {
        item.productNum++
      } else if (flag === 'minus') {
        if (item.productNum > 1) {
          item.productNum--
        }
      } else {
        item.checked = item.checked === '1' ? '0' : '1'
        console.log(item.checked)
      }
      axios.post('users/cartEdit', {
        productId: item.productId,
        productNum: item.productNum,
        checked: item.checked
      }).then((response) => {
        let res = response.data
        console.log(res)
        // 修改成功
      })
    },
    // 全选商品
    toggleCheckAll () {
      var flag = !this.checkAllFlag
      this.cartList.forEach((item) => {
        item.checked = flag ? '1' : '0'
      })
      axios.post('users/editCheckAll', {
        checkAll: flag
      }).then((response) => {
        let res = response.data
        if (res.status === '0') {
          console.log('操作成功')
        }
      })
    }
  },
  components: {
    NavHeader,
    NavFooter,
    NavBread,
    Modal
  }
}
</script>
